<template>
  <div class="share">
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="类别名称：">
        <el-input v-model="formInline.typeName" placeholder="类别名称"></el-input>
      </el-form-item>
      <el-form-item label="key名称：">
        <el-input v-model="formInline.dicKey" placeholder="key名称"></el-input>
      </el-form-item>
      <el-form-item label="value名称：">
        <el-input v-model="formInline.dicValue" placeholder="value名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>

        <el-button type="primary" @click="addClick">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 子传父 -->
    <child @func="getMsg"></child>
    <!-- 父传子 -->
    <texts :content="content"></texts>

    <!-- 兄弟组件 -->
    <div>
        <aPage></aPage>
        <bPage></bPage>
    </div>


    <!-- 表格 -->

    <tables :tableData="tableData" :handleEdit="handleEdit" :handleDelete="handleDelete"></tables>

    <!-- <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column align="center" type="index" prop="date" label="序号" width="150"></el-table-column>
      <el-table-column align="center" prop="dicDesc" label="字典描述" width="120"></el-table-column>
      <el-table-column align="center" prop="dicKey" label="key值" width="120"></el-table-column>
      <el-table-column align="center" prop="dicOrder" label="字典排序" width="120"></el-table-column>
      <el-table-column align="center" prop="dicValue" label="value值" width="300"></el-table-column>
      <el-table-column align="center" prop="typeName" label="字典种类" width="120"></el-table-column>

      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>-->

    <!-- 分页 -->
    <div class="block">
      
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import tables from "./tables";
import child from "./child";
import texts from "./texts";
import aPage from "./aPage";
import bPage from "./bPage";
export default {
  name: "share",
  components: {
    tables: tables,
    child: child,
    texts:texts,
    aPage:aPage,
    bPage:bPage
  },
  data() {
    return {
      formInline: {
        typeName: "",
        dicKey: "",
        dicValue: "",
        pageNum: 1,
        pageSize: 10
      },

      tableData: [],

      total: 0,
      msgFrom: "this is msg",
      content:"我是父组件传给子组件的lalala",
     
    };
  },
  created() {
    this.list();
  },
  methods: {
    // 子组件
    getMsg(data) {
      this.msgFrom = data;
      console.log(this.msgFrom);
    },

  
    // 列表
    list() {
      this.$axios
        .post("/city/sysdic/selectDicList", this.formInline)
        .then(res => {
          // console.log(res);
          this.tableData = res.list;
          this.total = res.total;
        });
    },
    //   查询
    onSubmit() {
      this.formInline.pageNum = 1;
      this.list();
    },
    // 添加
    addClick() {
      // this.$router.push("/shareAdd");
      this.$router.push({
        path: "/shareAdd",
        query: {
          pageType: 1
          // row:row
        }
      });
    },

    // 编辑
    handleEdit(index, row) {
      // console.log(row);
      this.$router.push({
        path: "/shareAdd",
        query: {
          row: row,
          pageType: 2
        }
      });
    },
    // 删除
    handleDelete(row) {
      // console.log(row);

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/city/sysdic/dicDelete", { id: row.id })
            .then(res => {
              // console.log(res);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.list();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 每页多少条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      this.list();
    },
    // 当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.formInline.pageNum = val;
      this.list();
    }
  }
};
</script>